<!--
 * @Author: leo
 * @Date: 2024-10-22 15:11:13
 * @LastEditors: leo
 * @Description: 
-->
<template>
  <div class="gound-stage">
    <div class="my-10 mx-5">
      <div class="text-[20px] my-10 mx-5">单个验证</div>
      <div class="flex gap-10 my-10 mx-5">
        <registering size="100"/>
        <asset-manage />
        <clue-manage />
        <avatar-line />
      </div>
    </div>
    <div class="my-10 mx-5">
      <div class="text-[20px]">所有图标</div>
      <div class="flex">
        <div
          class="cursor-pointer mr-10 mt-5 px-10 py-5 border-[1px] border-dashed border-[#ccc] rounded-[8px]"
          :class="{ 'active-project': project.value == projectKey }"
          v-for="project in projectListObj"
          @click="confirmProject(project.value)"
        >
          {{ project.desc }}
        </div>
      </div>
      <div class="my-5">（点击文字复制代码，点击图标下载png）</div>
      <div class="icon-gallery flex my-10 mx-5">
        <div
          class="flex flex-col justify-center items-center"
          v-for="(icon, key) in projectObjValue[projectKey]"
          :key="icon.name"
        >
          <component :is="icon" @click="downLoadPngFromSvg(icon, icon.__name)" />
          <div class="w-[100px]">
            <ToolTips
              maxWidth="200"
              :outStyle="{ 'text-align': 'center' }"
              class="my-5 cursor-pointer"
              @click="copyToBoard(icon)"
              :content="icon.__name"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as AllProject from 'icon-site-group';
import useClipboard from 'vue-clipboard3';
import { nextTick, ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import ToolTips from 'components/ToolTips.vue';
import ShakeSlot from 'components/ShakeSlot.vue';

const { toClipboard } = useClipboard();

const copyToBoard = async (icon) => {
  let copyText = `<${icon.__name} />`;
  try {
    toClipboard(copyText);
    nextTick(() => {
      ElMessage({
        message: `复制成功！`,
        type: 'success',
      });
    });
  } catch (e) {
    console.error(e);
  }
};
const downLoadPngFromSvg = (icon, fileName) => {
  const svgBlob = new Blob([icon.props.svgContent.default], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(svgBlob);

  const img = new Image();
  img.onload = function () {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    URL.revokeObjectURL(url);

    const pngData = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = pngData;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  img.src = url;
};

const projectKey = ref('');

const projectListObj = computed(() => {
  let obj = AllProject['descList'];
  let list = [];
  for (let key in obj) {
    list.push({
      desc: obj[key],
      value: key,
    });
  }
  return list;
});

const projectObjValue = computed(() => {
  let iconObj = {};
  for (let key in AllProject) {
    if (key !== 'default' && key !== 'descList') {
      iconObj[key] = AllProject[key];
    }
  }
  return iconObj;
});

const confirmProject = (key) => {
  projectKey.value = key;
};
onMounted(() => {
  projectKey.value = projectListObj.value[0]?.value;
});
</script>

<style lang="less" scoped>
.gound-stage {
  height: calc(100% - 40px);
  overflow: auto;
  .active-project {
    // background-color: #ccc;
    color: #fff;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  }
  .icon-gallery {
    margin: 10px 20px;
    display: flex;
    color: #333;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
  }
}
::-webkit-scrollbar {
  display: none !important;
}
</style>
